<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>key的原理</title>

    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        react,vue中的key有什么作用？
            虚拟DOM中key的作用
                key时虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
                比较规则如下。
            对比规则：
                旧虚拟DOM中找到了与新虚拟DOM相同的key，
                    若虚拟DOM中内容没变，直接使用之前的真实DOM。
                    若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
            用index作为key可能会引发的问题
                一：若对数据进行：逆序添加，逆序删除等破坏顺序操作：
                        会产生没有必要的真实DOM更新=》界面效果没有问题，但效率低
                二：如果结构中还包含输入类的DOM
                        会产生错误DOM更新===》界面有问题。
            开发中如何选择key?
                一：最好使用每条数据的唯一标识作为key，比如id,手机号，身份证号，学号等唯一值。
                二：如果不存在对数据的逆序添加，删除等破坏顺序操作，仅用于渲染列表用于展示，
                        使用index作为key是没有问题的。
     -->

    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>人员列表 遍历数组 使用index作为key</h2>
        <button v-on:click.once="add">添加一个老刘index作为key</button>
        <ul>
            <li v-for="(p,index) in persons" :key="index">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
            
            <h2>人员列表 遍历数组 使用唯一标识作为key</h2>
            <button v-on:click.once="add">添加一个老刘唯一标识作为key</button>
            <!-- 推荐写法 key使用唯一标识 -->
            <li v-for="(p,index) in persons" :key="p.id">
                {{p.name}}-{{p.age}}
                <input type="text">
            </li>
        </ul>

    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止 vue在启动时生成生产提示    
        const vm = new Vue({
            el: '#root',
            data: {
                name: '徐亚远',
                persons:[
                    {id:"001",name:"张三",age:80},
                    {id:"002",name:"李四",age:81},
                    {id:"003",name:"王五",age:82},
                ],
                car:{
                    name:"奥迪",
                    price:700000,
                    color:"黑色"
                },
                str:"hello"
            },
            methods: {
                add(){
                    const p = {id:'004',name:'老刘',age:40}
                    // 尾部追加 使用 index当作key是不会引起乱序问题的
                    // this.persons.push(p)
                    // 头部添加
                    this.persons.unshift(p)
                }
            }
        })
    </script>


</body>

</html>